<template>
  <view v-if="!isLoading" class="store_container">

    <swiper v-if="banner.length>0" class="banner">
      <swiper-item v-for="item in banner">
        <image :src="$xyfun.image(item.image)"></image>
      </swiper-item>
    </swiper>
    <xy-empty v-else :text="'暂无图片'"></xy-empty>

    <view class="store_front">{{storeInfo.name}}</view>

    <view class="tab-view">
      <view :class="showModel=='goods'?'item active':'item'" @click="showModel='goods'">商品</view>
      <view :class="showModel=='comment'?'item active':'item'" @click="showModel='comment'">评价</view>
    </view>
    <view class="content" v-if="showModel=='goods'">
      <view class="cate-list">
        <view :class="cid==item.id?'active':''" v-for="(item,index) in categoryList" :key="index"
              @click="tapNav(index,item)">
          {{ item.name }}
        </view>
      </view>
      <view class="goods-list" v-if="goodsList.length>0">
        <scroll-view scroll-y="true" @scrolltolower="lower" class="goods-scroll">
          <view class="item" v-for="(item,index) in goodsList" :key="index">
            <xy-goods-row3 :item="item" @addCart="addCart"/>
          </view>
        </scroll-view>
      </view>
      <view class="goods-list" v-else>
        <xy-empty :text="'暂无商品'"/>
      </view>
    </view>

    <view class="content just-c" v-if="showModel=='comment'">
      <xy-comment :comment_list="comment_list"></xy-comment>
    </view>


  </view>
</template>
<script>
import { mapState,mapActions } from 'vuex';
import xyGoodsSku from "@/components/xy-goods/sku.vue";
import xyGoodsRow3 from "@/components/xy-goods/row3.vue";
import xyComment from "@/components/xy-comment/index.vue";
import xyEmpty from "@/components/xy-empty/index.vue";
export default {
  components:{
    xyComment,
    xyEmpty,
    xyGoodsRow3,
    xyGoodsSku
  },
  name: "xyStore",
  props: {
    store_id: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      isLoading:true,

      showModel: 'goods',

      storeInfo : {},
      banner : [],

      goodsList: [],
      currentPage: 1,
      lastPage: 1,
      scrollTop:0,

      showSku: false,
      buyType: 'sku',
      goods:{},
      alreadyGoods : [],

      categoryList: [],
      cid: 0,

      comment_list : []
    };
  },
  created() {
    this.loadData();
  },
  computed: {
    ...mapState(['common','user'])
  },
  methods: {
    async loadData() {

      this.$api.post({
        url: '/index/store',
        loadingTip:'加载中...',
        data: {
          store_id : this.store_id
        },
        success: res => {
          this.isLoading = false;
          this.storeInfo = res.store_info;
          this.banner = res.banner;
          this.goodsList = res.goods_list;
          this.categoryList = res.cates;
          this.comment_list = res.comment;
          console.log(this.comment_list);
          if(res.cates[0]){
            this.cid = res.cates[0].id;
          }
        }
      });
    },

    // 产品列表
    getGoodsList: function() {
      var that = this;

      this.$api.post({
        url: '/goods/lists',
        loadingTip:'加载中...',
        data: {
          store_id: that.store_id,
          search: that.keyword,
          page: that.currentPage,
          category_id: that.cid,
        },
        success: res => {

          this.goodsList = [...this.goodsList, ...res.data];
          this.isLoading = false;
          this.currentPage = res.current_page;
          this.lastPage = res.last_page;

        }
      });

    },

    tapNav(index, item) {
      var list = this.categoryList[index];
      this.scrollTop = 0;
      this.categoryTitle = list.cate_name;
      this.categoryErList = item.children ? item.children : [];
      this.cid = list.id;
      this.sid = 0;
      this.currentPage = 1;
      this.goodsList = [];
      uni.pageScrollTo({
        scrollTop: this.scrollTop,
        duration: 300
      });

      this.getGoodsList();
    },

    lower(){
      if(this.currentPage < this.lastPage) {
        this.currentPage += 1;
        this.getGoodsList();
      }
    },

    // 组件返回的规格;
    getSkuText(e) {
      this.currentSkuText = e;
    },

    // 加入购物车
    addCart(item) {
      this.$emit('addCart', item);
    },
  }
}
</script>
<style lang="scss">
.store_container{
  display: flex;
  flex-direction: column;
  height: calc(100vh - (constant(safe-area-inset-bottom) + 112rpx));
  height: calc(100vh - (env(safe-area-inset-bottom) + 112rpx));
  background: #fff;
}
.banner {
  width: 100%;
  height: 400rpx;
  margin-bottom: 10px;
  border-radius: 20rpx;
  overflow: hidden;
  image{
    width: 100%;
    height: 400rpx;
  }
}
.store_front{
  z-index: 999;
  position: relative;
  margin: -80rpx 30rpx 0 30rpx;
  background: #fff;
  height: 140rpx;
  border-radius: 30rpx;
  font-size: 32rpx;
  font-weight: bold;
  line-height: 140rpx;
  padding-left: 30rpx;
  box-shadow: 2rpx 2rpx 4rpx #999999;
}

.tab-view{
  background: #fff;
  display: flex;
  padding: 30rpx 20rpx;
  .item{
    width: 120rpx;
    text-align: center;
    font-weight: bold;
    &.active:after{
      content: '';
      display: block;
      width: 60rpx;
      height: 4rpx;
      background: $theme2;
      border-radius: 3rpx;
      margin: 4rpx auto 0 auto;
    }
  }
}

.content{
  height: 1rpx;
  flex-grow: 1;
  display: flex;
}
.cate-list{
  width: 200rpx;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow-y: scroll;
  background: #f0f0f0;
  &::-webkit-scrollbar {
    display: none;
  }
  view{
    line-height: 80rpx;
    font-size: 28rpx;
    height: 80rpx;
    position: relative;
    padding-left: 30rpx;
  }
  .active{
    background: #fff;
  }
  .active:after{
    background: $theme2;
    height: 30rpx;
    border-radius: 8rpx;
    width: 5rpx;
    display: block;
    content: '';
    position: absolute;
    left: 15rpx;
    bottom: 26rpx;
  }
}


.goods-list {
  width: 1rpx;
  flex-grow: 1;
  background: #fff;
  margin-left: 20rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  .goods-scroll{
    overflow-y: auto;
  }
  .item{
    background: #fff;
  }
}


</style>
